.goods-item {
	display: flex;
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	margin: 0 0 20px 0;
	position: relative;
	box-sizing: border-box;
	height: 320px;

	&__rank {
		position: absolute;
		left: 40px;
		top: 26px;
		z-index: 9;

		img {
			height: 58px;
			width: 48px;
		}

		&-index {
			background-image: linear-gradient(to bottom, #ff404f, #f70114);
			height: 48px;
			width: 48px;
			border-radius: 0 0 10px 10px;
			color: #fff;
			text-align: center;
			line-height: 48px;
		}
	}
	&_limit {
        position: absolute;
        z-index: 9;
        top: 10px;
        width: 130px;
        height: 44px;
        &-tag{
            width: 100%;
            height: 100%;
        }
	}
	&__cover {
		height: 280px;
		width: 280px;
		position: relative;
		flex-shrink: 0;
		&-pic {
			height: 100%;
			width: 100%;
			border-radius: 10px;
		}

		&-tag {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	&__detail {
		display: flex;
		flex-direction: column;
		height: calc(100% - 6px);
		width: calc(100% - 270px);
		margin-left: 20px;

		.flex1 {
			flex: 1;
		}
	}

	&__title {
		font-size: 28px;
		font-weight: 500;
		margin-bottom: 10px;
		max-height: 90px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

		.iconfont {
			color: #ff4200;
			position: relative;
			top: 3px;
			margin-right: 4px;
			transform: scale(1.2);
			display: inline-block;
		}

		&-tag {
			background-color: #ff4200;
			color: #fff;
			display: inline-block;
			padding: 0 6px;
			border-radius: 6px;
			margin-right: 6px;
			font-size: 20px;
			height: 35px;
			line-height: 35px;
		}
	}

	&__lave {
		color: #666;
	}

	&__newcomer-price {
		color: #f70114;
		font-size: 22px;
		font-weight: 500;

		&--now {
			font-size: 36px;
			margin-left: 5px;
		}

		&--original {
			text-decoration: line-through;
			color: #b5b5b5;
			margin-left: 20px;
		}

		&--now,
		&--original {
			&::before {
				content: '￥';
				font-size: 24px;
			}
		}
	}

	&__footer {
		margin-top: 16px;
		display: flex;
		align-items: center;
	}

	&__coupon {
		position: relative;
		margin-right: 16px;

		img {
			display: block;
			height: 64px;
			width: 102px;
		}

		span {
			position: absolute;
			left: 0;
			top: 0;
			color: #fff;
			display: inline-block;
			width: 100px;
			text-align: center;
			font-size: 26px;
			font-weight: 500;
		}
	}

	&__grab {
		position: relative;
		flex: 1;

		img {
			display: block;
			height: 64px;
			width: 266px;
		}

		&-price {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
			height: 60px;
			width: 130px;

			span {
				color: #e8343d;
				font-weight: 500;

				&:first-child {
					font-size: 26px;
					position: relative;
					top: 2px;
					left: 2px;
				}

				&:last-child {
					font-size: 20px;
					position: relative;
					top: -2px;
				}
			}
		}

		&-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 150px;
			top: 0;
			height: 64px;
			width: 116px;
			color: #fff;
			text-align: center;
			font-size: 22px;
			letter-spacing: 1px;
			font-weight: 500;
		}
		&-btn--dis {
			width: 100%;
			text-align: right;			
			div {
				display: inline-block;
				width: 264px;
				line-height: 60px;
				border-radius: 12px;
				font-size: 26px;
				color: #fff;
				text-align: center;
				background: linear-gradient(118deg, #fb5c47 0%, #e8343d 100%);
			}
		}
	}
	&__grab--dis {
		margin-left: 102px;
	}

	&__state--used {
		position: absolute;
		right: 20px;
		top: calc(50% - 60px);

		img {
			height: 100px;
			width: 100px;
		}
	}

	&__state--finished {
		position: absolute;
		left: 20px;
		top: 25px;
		height: 270px;
		width: 270px;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;

		span {
			display: block;
			border: 4px solid #fff;
			color: #fff;
			height: 120px;
			width: 120px;
			border-radius: 120px;
			line-height: 120px;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.3);
			transform: rotate(-30deg);
			font-size: 30px;
			box-sizing: border-box;

			&::after {
				content: '';
				display: block;
				height: 100%;
				width: 100%;
				position: absolute;
				left: -18px;
				top: -18px;
				border-radius: 120px;
				padding: 2px;
				border: 16px solid rgba(0, 0, 0, 0.3);
			}
		}
	}

	&.is-disabled {
		.goods-item__grab {
			text {
				color: #999;
			}
		}
	}
}
